<template>
  <el-popover title="参会情况" trigger="hover">
    <el-progress
      slot="reference"
      :text-inside="true"
      :color="customColors"
      :stroke-width="15"
      :percentage="percentage"
    />
    <div v-if="indicatorDetail">
      <p>已完成：{{ data.accomplishHours / 3600 || 0 }}小时&nbsp;&nbsp;&nbsp;{{ data.accomplishTimes || 0 }}次</p>
      <p>指&nbsp;&nbsp;标：{{ indicatorDetail.requireHours || 0 }}小时&nbsp;&nbsp;&nbsp;{{ indicatorDetail.requireTimes || 0 }}次</p>
    </div>
  </el-popover>
</template>
<script>
export default {
  name: 'UserProgress',
  props: {
    data: { type: Object, default: null },
    indicatorDetail: { type: Object, default: null }
  },
  data: () => ({
    customColors: [
      { color: '#f56c6c', percentage: 20 },
      { color: '#e6a23c', percentage: 40 },
      { color: '#5cb87a', percentage: 60 },
      { color: '#1989fa', percentage: 80 },
      { color: '#6f7ad3', percentage: 100 }
    ],
    percentage: 20
  }),
  watch: {
    data: {
      handler(val) {
        this.awaitRefresh()
      },
      immediate: true
    }
  },
  methods: {
    awaitRefresh() {
      if (!this.indicatorDetail) {
        return setTimeout(() => {
          this.awaitRefresh()
        }, 200)
      }
      this.refresh()
    },
    refresh() {
      const accomplishHours = this.data.accomplishHours
        ? this.data.accomplishHours / 3600
        : 0
      this.percentage =
        (accomplishHours / this.indicatorDetail.requireHours) * 100
    }
  }
}
</script>
